import React, {Component} from 'react';

import './index.css'

class Item extends Component {
    state = {
        mouse: false
    }
    // 鼠标进入
    handleEnter = (flag) => {
        return (e) => {
            this.setState({
                mouse: flag
            })
        }
    }

    // 鼠标移出
    handleLeave = (flag) => {
        return (e) => {
            this.setState({
                mouse: flag
            })
        }
    }

    // 删除todo
    deleteTodo = (id) => {
        const {deletetodo} = this.props
        return () => {
            deletetodo(id)
        }
    }

    // 选择todo
    checkTodo = (id) => {
        const {check} = this.props
        return (e) => {
            check(id,e.target.checked)
        }
    }

    render() {
        const {mouse} = this.state
        const {id, name, done} = this.props
        return (
            <li onMouseEnter={this.handleEnter(true)} onMouseLeave={this.handleLeave(false)}
                style={{backgroundColor: mouse === true ? "#ddd" : "white"}}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.checkTodo(id)}/>
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" style={{display: mouse === true ? "block" : "none"}}
                        onClick={this.deleteTodo(id)}>删除
                </button>
            </li>
        );
    }
}

export default Item;